import React, { PropTypes } from 'react';
import { connect } from 'dva';
import { routerRedux, Link } from 'dva/router';
import { Menu, Breadcrumb, Icon, Collapse, Tabs, Row, Col, Card, Carousel} from 'antd';

import './less/home.less';

let course = {'今日课程': [{classHour: '1-2', name: '课程名称1', date: '08:00-10:00', address: '汇学楼410'},{classHour: '3-4', name: '课程名称2', date: '10:00-12:00', address: '汇学楼412'},{classHour: '5-6', name: '课程名称3', date: '14:00-16:00', address: '汇学楼410'}], '明日课程': [{classHour: '1-2', name: '课程名称1', date: '08:00-10:00', address: '汇学楼410'},{classHour: '3-4', name: '课程名称2', date: '10:00-12:00', address: '汇学楼408'}] };

class Index extends React.Component{
  constructor(props) {
    super(props);

    this.state = {
      newProblemData: [],
      coursewareData: [],
      shareData: [],
      currentCarousel: 0,
      courseData: {}
    };

    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
  }

  next() {
    this.refs.slider.refs.slick.slickNext();
  }

  previous() {
    this.refs.slider.refs.slick.slickPrev();
  }

  componentDidMount() {
    let {newProblemData, coursewareData, shareData} = this.state;
    for(let i = 0; i < 3; i++) {
      newProblemData.push({
        portrait: 'https://zos.alipayobjects.com/rmsportal/iXsgowFDTJtGpZM.png',
        name: '王远正',
        class: '地质一班',
        date: '2016-12-02',
        content: '从央视画面中看到，坐在习近平身后的六个人，分别是中央政治局委员、中央政策研究室主任王沪宁，中央政治局委员、国务院副总理汪 洋，全国政协副主席、中国人民银行行长周小川，外交部部长王毅，国家发改委主任徐绍史和中财办主任刘鹤。'
      });
    }
    for(let i = 0; i < 3; i++) {
      coursewareData.push({
        img: 'http://img10.360buyimg.com/n0/jfs/t148/292/2155279750/36545/574fcfd/53c8cf43Nd3682d45.jpg',
        name: '课件名称'
      });
      shareData.push({
        date: '2016-12-02 18:20:30',
        name: `课件名称${i + 1}`,
        personnel: '王远正 彭洪林 吉永山'
      });
    }
    this.setState({
      newProblemData,
      coursewareData,
      shareData,
      courseData: course
    });
  }

  render(){
    let {newProblemData, courseData, coursewareData, shareData} = this.state;
    let _problemList = [];
    newProblemData.map((ele, index) => {
      _problemList.push(
        <li key={`problem${index}`}>
            <div className="itemHead">
                <div className="stdInfo">
                    <img src={ele.portrait} />
                    <div className="name">
                        <p>{ele.name}</p>
                        <p>{ele.class}</p>
                    </div>
                    <div className="date">{ele.date}</div>
                </div>
            </div>
            <div className="itemContent">{ele.content}</div>
        </li>
      );
    });

    let _courseToday = [];
    let _courseTomorrow = [];
    for(let key in courseData) {
      let variable = key == '今日课程' ? _courseToday : _courseTomorrow;
      courseData[key].map((ele, index) => {
        variable.push(
          <li key={`${key}${index}`}>
            <div className="courseUnit">{ele.classHour}</div>
            <div className="courseInfo">
              <div className="name">{ele.name}</div>
              <div className="info"><i className="fa fa-clock-o time" />{ele.date}<i className="fa fa-location-arrow location"/>{ele.address}</div>
            </div>
          </li>
        );
      });
    }

    let _coursewareList = [];
    coursewareData.map((ele, index) => {
      _coursewareList.push(
        <li key={`courseware${index}`}>
          <img src={ele.img} />
          <p>{ele.name}</p>
        </li>
      );
    });

    let _shareList = [];
    shareData.map((ele, index) => {
      _shareList.push(
        <li className="share">
          <span className="date">{ele.date}</span>
          <i className="fa fa-clock-o" />
          <span className="name">{ele.name}</span>
          <span>分享给:{ele.personnel}</span>
        </li>
      );
    });

    return (
        <div className="normal">
            <Row>
                <Col span={10}>
                    <Card title="最新问题" className="newProblem">
                        <ul>
                            {_problemList}
                        </ul>
                        <Link to='/app/ask' className="footer">
                          <div className="footer">更多</div>
                        </Link>

                    </Card>
                </Col>
                <Col span={14} style={{paddingLeft:20}}>
                    <Card
                      title={this.state.currentCarousel == 0 ? '今日课程' : '明日课程'}
                      className="nowCourse"
                      extra={
                        <span>
                          <Icon style={{fontSize:18,cursor:'pointer'}} type="left" onClick={this.previous}/>
                          <Icon style={{fontSize:18,cursor:'pointer',marginLeft:10}} type="right" onClick={this.next}/>
                        </span>}
                    >
                      <Carousel ref='slider' dots={false} afterChange={(current) => this.setState({currentCarousel: current})}>
                        <div>
                          <div className="coursePanel">
                            <ul>
                              {_courseToday}
                            </ul>
                          </div>
                        </div>
                        <div>
                          <div className="coursePanel">
                            <ul>
                              {_courseTomorrow}
                            </ul>
                          </div>
                        </div>
                      </Carousel>
                    </Card>
                </Col>
            </Row>
            <Row className="marginT20">
              <Col span={10}>
                  <Card title="我的课件" className="myCourse">
                      <ul>
                          {_coursewareList}
                      </ul>
                  </Card>
              </Col>
              <Col span={14} style={{paddingLeft:20}}>
                  <Card title="最近分享" className="lastShare">
                      <ul>
                        {_shareList}
                      </ul>
                  </Card>
              </Col>
            </Row>
        </div>
    )
  }
}

export default Index;
